<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta charset="utf-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style rel="stylesheet" type="text/css">
        body {
            background-color: #EDF1F2;
            font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
        }

        #center {
            width: 450px;
            height: 450px;
            margin-top: 150px;
            background: white;
        }

        .form-horizontal {

            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            margin-top: -100px;
        }

        #span_login {
            font-size: 20px;
            color: black;
            font-weight: bold;
        }

        #span_register {
            font-size: 20px;
            color: white;
            font-weight: bold;
        }

        .head_line {
            width: 450px;
            margin-left: -15px;
            height: 45px;
            background: #EAEAEA;
            text-align: center;
        }

        .head_line strong {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-4 column">
                </div>
                <div id="center" class="col-md-4 column">
                    <div class="head_line"><span id="span_login" onclick="setStatus(true)">登录</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span
                            id="span_register" onclick="setStatus(false)">注册</span></div>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" placeholder="请输入用户名..."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="password" placeholder="请输入密码..."/>
                            </div>
                        </div>
                        <div id="reinput_pwd" class="form-group">
                            <label for="password" class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="repassword" placeholder="请再次输入密码..."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label><input type="checkbox"/>记住密码</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button onclick="doAction(this);return false;" id="submit_" class="btn btn-default">登录
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 column">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var isLogin = true;

    $(function () {
        $('#reinput_pwd').css('display', isLogin ? 'none' : 'block');
    })

    function setStatus(flag) {
        isLogin = flag;
        console.log(isLogin ? "登录" : "注册")
        $('#submit_').text(isLogin ? "登录" : "注册");
        $('#span_login').css('color', isLogin ? 'black' : 'white')
        $('#span_register').css('color', !isLogin ? 'black' : 'white')
        $('#reinput_pwd').css('display', isLogin ? 'none' : 'block');
    }

    function doAction(o) {
        if ($('#username').val() == null || $('#username').val() == undefined || $('#username').val() == '') {
            alert("请输入用户名！");
            return;
        }
        if ($('#password').val() == null || $('#password').val() == undefined || $('#password').val() == '') {
            alert("请输入密码！");
            return;
        }
        if (!isLogin) {
            if ($('#repassword').val() != $('#password').val()) {
                alert("请保证两次密码输入一致！");
                return;
            }
        }
        var url;
        if (isLogin) {
            url = address_head + "/api/Login";
        } else {
            url = address_head + "/api/Register";
        }
        console.log(url)
        $.ajax({
            url: url,
            asyn: true,
            type: 'POST',
            dataType: 'json',
            data: {
                name: $('#username').val(),
                pwd: $('#password').val()
            },
            cache: false,
            success: function (data) {
                console.log('服务器返回值：' + data)
                if (data == '1') {
                    if (isLogin) {
                        console.log("登录成功！")
                        window.location = "index.jsp";
                    } else {
                        console.log("注册成功！")
                        alert("注册成功，请登录")
                    }
                } else if (data == "-1") {
                    if (isLogin) {
                        console.log("登录失败！")
                        alert("登录失败！")
                    } else {
                        console.log("注册失败！")
                        alert("注册失败！")
                    }
                }else if(data==11){
                    if (isLogin) {
                        console.log("管理员登录成功！")
                        window.location = "admin_operation.jsp";
                    }
                }
            },
            error: function () {
                alert("请求失败");
            },
            dataType: 'json'
        });
    }

</script>
</body>
</html>
